
import { SearchBar, Image } from 'antd-mobile'
import './index.scss'
import { FireFill, LocationFill, RightOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom';
import { useEffect } from 'react';
import { addShopCategory, getShopInfoAPI } from '../../api/shops';

import { getShopsInfo } from '../../store/modules/shops';
import { useDispatch, useSelector } from 'react-redux';
import type { AppDispatch, RootState } from '../../store';
import { Loading } from '../../layouts/MainLayout/components/loading';


const Home = () => {
  //  useNav({children:'1231',back:'12'})
  const iconsize: number = 16;
  const location = "新乡"
  const typeList = [{ url: 'https://ts1.tc.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0', type: '奶茶', id: '1' },
  { url: 'https://ts1.tc.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0', type: '午餐', id: '2' },
  { url: 'https://ts1.tc.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0', type: '晚餐', id: '3' },
  { url: 'https://ts1.tc.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0', type: '早餐', id: '4' },
  { url: 'https://ts1.tc.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0', type: '晚餐', id: '5' },
  { url: 'https://ts1.tc.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0', type: '早餐', id: '6' },
  { url: 'https://ts1.tc.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0', type: '晚餐', id: '7' },
  { url: 'https://ts1.tc.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0', type: '早餐', id: '8' }]
  const dispatch = useDispatch<AppDispatch>()
  const navigate = useNavigate();
  const { Shops, loading } = useSelector((state: RootState) => {
    return state.shops
  })


  console.log(Shops)

  const navShopDetails = (id: string) => {
    navigate('/shopdetails?id=' + id)
  }




  useEffect(() => {
    dispatch(getShopsInfo())
  }, [dispatch])
  
  if (loading) {
    return <div>
      <Loading />
    </div>
  }

  return <div className='home'>
    <div className='head'>
      <div className='location'>
        <LocationFill className='icon' fontSize={iconsize} color='#000000' />
        <div>{location}</div>
        <RightOutline fontSize={iconsize} />
      </div>
      <SearchBar className='search' placeholder='搜索商家' />
    </div>
    <div className='gridType'>
      {typeList.map(item =>
        <div className='gridItem' key={item.id}>
          <div>
            <Image width={40} height={40} src={item.url} />
          </div>
          <div>
            {item.type}
          </div>
        </div>
      )}
    </div>
    <div className='hotShop'><FireFill color='red' fontSize={18} />热门商家</div>
    <div className='shopList'>
      {Shops.map(item => (
        <div className='listItem' key={item._id} onClick={() => navShopDetails(item._id)}>
          <div className='itemleft'>
            <Image style={{ borderRadius: 10 }} width={80} height={80} src={item.avatar} />
          </div>
          <div className='itemRight'>
            <div className='tiitle'>
              {item.title}
            </div>
            <div className='score'>
              <span>{item.score}分</span>
              <span>月售{item.month_sales}+</span>
              <span>人均消费{item.capita}￥</span>
            </div>
            <div className='distribution'>
              {/* <span>{item.delivery_fee}元起送</span> */}
              {item.delivery_fee !== 0 ? <span >配送费<span style={{ color: 'blue',paddingLeft:'3px' }}>{item.delivery_fee}￥</span></span> : <span>免配送费</span>}
              <span>{item.delivery_time}分钟内送达</span>
            </div>
          </div>
        </div>))}

    </div>

  </div>
}

export default Home